<!--头部信息-->
<header class="lyear-layout-header">

    <nav class="navbar">

        <div class="navbar-left">
            <div class="lyear-aside-toggler">
                <span class="lyear-toggler-bar"></span>
                <span class="lyear-toggler-bar"></span>
                <span class="lyear-toggler-bar"></span>
            </div>
        </div>

        <ul class="navbar-right d-flex align-items-center">
            <!--切换主题配色-->
            <li class="dropdown dropdown-skin">
                <span data-toggle="dropdown" class="icon-item"><i class="mdi mdi-palette"></i></span>
                <ul class="dropdown-menu dropdown-menu-right" data-stopPropagation="true">
                    <li class="drop-title"><p>主题</p></li>
                    <li class="drop-skin-li clearfix">
                <span class="inverse">
                  <input type="radio" name="site_theme" value="default" id="site_theme_1" checked>
                  <label for="site_theme_1"></label>
                </span>
                        <span>
                  <input type="radio" name="site_theme" value="dark" id="site_theme_2">
                  <label for="site_theme_2"></label>
                </span>
                        <span>
                  <input type="radio" name="site_theme" value="translucent" id="site_theme_3">
                  <label for="site_theme_3"></label>
                </span>
                    </li>
                    <li class="drop-title"><p>LOGO</p></li>
                    <li class="drop-skin-li clearfix">
                <span class="inverse">
                  <input type="radio" name="logo_bg" value="default" id="logo_bg_1" checked>
                  <label for="logo_bg_1"></label>
                </span>
                        <span>
                  <input type="radio" name="logo_bg" value="color_2" id="logo_bg_2">
                  <label for="logo_bg_2"></label>
                </span>
                        <span>
                  <input type="radio" name="logo_bg" value="color_3" id="logo_bg_3">
                  <label for="logo_bg_3"></label>
                </span>
                        <span>
                  <input type="radio" name="logo_bg" value="color_4" id="logo_bg_4">
                  <label for="logo_bg_4"></label>
                </span>
                        <span>
                  <input type="radio" name="logo_bg" value="color_5" id="logo_bg_5">
                  <label for="logo_bg_5"></label>
                </span>
                        <span>
                  <input type="radio" name="logo_bg" value="color_6" id="logo_bg_6">
                  <label for="logo_bg_6"></label>
                </span>
                        <span>
                  <input type="radio" name="logo_bg" value="color_7" id="logo_bg_7">
                  <label for="logo_bg_7"></label>
                </span>
                        <span>
                  <input type="radio" name="logo_bg" value="color_8" id="logo_bg_8">
                  <label for="logo_bg_8"></label>
                </span>
                    </li>
                    <li class="drop-title"><p>头部</p></li>
                    <li class="drop-skin-li clearfix">
                <span class="inverse">
                  <input type="radio" name="header_bg" value="default" id="header_bg_1" checked>
                  <label for="header_bg_1"></label>
                </span>
                        <span>
                  <input type="radio" name="header_bg" value="color_2" id="header_bg_2">
                  <label for="header_bg_2"></label>
                </span>
                        <span>
                  <input type="radio" name="header_bg" value="color_3" id="header_bg_3">
                  <label for="header_bg_3"></label>
                </span>
                        <span>
                  <input type="radio" name="header_bg" value="color_4" id="header_bg_4">
                  <label for="header_bg_4"></label>
                </span>
                        <span>
                  <input type="radio" name="header_bg" value="color_5" id="header_bg_5">
                  <label for="header_bg_5"></label>
                </span>
                        <span>
                  <input type="radio" name="header_bg" value="color_6" id="header_bg_6">
                  <label for="header_bg_6"></label>
                </span>
                        <span>
                  <input type="radio" name="header_bg" value="color_7" id="header_bg_7">
                  <label for="header_bg_7"></label>
                </span>
                        <span>
                  <input type="radio" name="header_bg" value="color_8" id="header_bg_8">
                  <label for="header_bg_8"></label>
                </span>
                    </li>
                    <li class="drop-title"><p>侧边栏</p></li>
                    <li class="drop-skin-li clearfix">
                <span class="inverse">
                  <input type="radio" name="sidebar_bg" value="default" id="sidebar_bg_1" checked>
                  <label for="sidebar_bg_1"></label>
                </span>
                        <span>
                  <input type="radio" name="sidebar_bg" value="color_2" id="sidebar_bg_2">
                  <label for="sidebar_bg_2"></label>
                </span>
                        <span>
                  <input type="radio" name="sidebar_bg" value="color_3" id="sidebar_bg_3">
                  <label for="sidebar_bg_3"></label>
                </span>
                        <span>
                  <input type="radio" name="sidebar_bg" value="color_4" id="sidebar_bg_4">
                  <label for="sidebar_bg_4"></label>
                </span>
                        <span>
                  <input type="radio" name="sidebar_bg" value="color_5" id="sidebar_bg_5">
                  <label for="sidebar_bg_5"></label>
                </span>
                        <span>
                  <input type="radio" name="sidebar_bg" value="color_6" id="sidebar_bg_6">
                  <label for="sidebar_bg_6"></label>
                </span>
                        <span>
                  <input type="radio" name="sidebar_bg" value="color_7" id="sidebar_bg_7">
                  <label for="sidebar_bg_7"></label>
                </span>
                        <span>
                  <input type="radio" name="sidebar_bg" value="color_8" id="sidebar_bg_8">
                  <label for="sidebar_bg_8"></label>
                </span>
                    </li>
                </ul>
            </li>
            <!--切换主题配色-->
            <li class="dropdown dropdown-profile">
                <a href="javascript:void(0)" data-toggle="dropdown" class="dropdown-toggle">
                    <img class="img-avatar img-avatar-48 m-r-10" id="photoUri" src="/statics/images/no_image.gif" alt="管理员" />
                    <span id="userName"></span>
                </a>
                <ul class="dropdown-menu dropdown-menu-right">
                    <li>
                        <a class="dropdown-item" href="/security/admin/info.html"><i class="mdi mdi-account"></i> 个人信息</a>
                    </li>
                    <li>
                        <a class="dropdown-item" href="/security/admin/password.html"><i class="mdi mdi-lock-outline"></i> 修改密码</a>
                    </li>
                    <li class="dropdown-divider"></li>
                    <li>
                        <a class="dropdown-item"  href="javascript:void(0)" id="logout"><i class="mdi mdi-logout-variant"></i> 退出登录</a>
                    </li>
                </ul>
            </li>
        </ul>

    </nav>

</header>
<script type="text/javascript">

    MX.axget(ADMIN_INFO,null,true,null,function(e){
        $("#photoUri").attr("src",e.data.photoUri?e.data.photoUri:"/statics/images/no_image.gif");
        $("#userName").html(e.data.realName!=null?e.data.realName:e.data.userName);
    })

    // 侧边栏
    $(document).on('click', '#logout', function() {
        MX.axpost(ADMIN_LOGOUT,null,true,null,function(e){
            if (e.code === "00000") {
                MX.successMsg("退出成功~")
                setTimeout(function(){
                    Token.remove()
                    window.location.href = LOGIN_VIEW + "?logout=1";
                },1000)
            } else {
                MX.failMsg("退出失败")
            }
        })

    });

    // 侧边栏
    $(document).on('click', '.lyear-aside-toggler', function() {
        $('.lyear-layout-sidebar').toggleClass('lyear-aside-open');
        $("body").toggleClass('lyear-layout-sidebar-close');

        if ($('.lyear-mask-modal').length == 0) {
            $('<div class="lyear-mask-modal"></div>').prependTo('body');
        } else {
            $( '.lyear-mask-modal' ).remove();
        }
    });

    // 读取cookie中的主题设置
    if ($.isFunction($.cookie)) {
        var the_logo_bg    = $.cookie('the_logo_bg'),
            the_header_bg  = $.cookie('the_header_bg'),
            the_sidebar_bg = $.cookie('the_sidebar_bg'),
            the_site_theme = $.cookie('the_site_theme');

        if (the_logo_bg) $('body').attr('data-logobg', the_logo_bg);
        if (the_header_bg) $('body').attr('data-headerbg', the_header_bg);
        if (the_sidebar_bg) $('body').attr('data-sidebarbg', the_sidebar_bg);
        if (the_site_theme) $('body').attr('data-theme', the_site_theme);

        // 处理主题配色下拉选中
        $(".dropdown-skin :radio").each(function(){
            var $this = $(this),
                radioName = $this.attr('name');
            switch (radioName) {
                case 'site_theme':
                    $this.val() == the_site_theme && $this.prop("checked", true);
                    break;
                case 'logo_bg':
                    $this.val() == the_logo_bg && $this.prop("checked", true);
                    break;
                case 'header_bg':
                    $this.val() == the_header_bg && $this.prop("checked", true);
                    break;
                case 'sidebar_bg':
                    $this.val() == the_sidebar_bg && $this.prop("checked", true);
            }
        });
    }
    // 设置主题配色
    setTheme = function(input_name, data_name) {
        $("input[name='"+input_name+"']").click(function(){
            $('body').attr(data_name, $(this).val());
            $.isFunction($.cookie) && $.cookie('the_'+input_name, $(this).val());
        });
    }
    setTheme('site_theme', 'data-theme');
    setTheme('sidebar_bg', 'data-sidebarbg');
    setTheme('logo_bg', 'data-logobg');
    setTheme('header_bg', 'data-headerbg');
</script>
<!--End 头部信息-->
